<template>
  <div class="home">
    <div class="head">
      <van-image class="img" round fit="cover" :src="user.photo" />
      <div class="right-sizi">
        <h4>{{ user.name }}</h4>
        <span>{{ user.birthday }}</span>
      </div>
    </div>

    <van-row>
      <van-col span="8">
        <van-icon name="newspaper-o" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon class="two-icon" name="star-o" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon class="three-icon" name="tosend" />
        <span>阅读历史</span>
      </van-col>
    </van-row>
    <!-- <van-cell to="/mine/edit" title="编辑资料" icon="edit" is-link />
    <van-cell to="/mine/chat" title="刘亦菲" icon="chat-o" is-link />
    <van-cell title="系统设置" icon="setting-o" is-link />
    <van-cell @click="layout" title="退出登陆" icon="info-o" is-link /> -->
    <van-cell-group>
      <van-cell to="/mine/edit" icon="edit" title="编辑资料" is-link />
      <van-cell to="/mine/chat" icon="chat-o" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell icon="info-o" title="退出登录" @click="layout" is-link />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.dispatch("reqUserInfo");
  },
  methods: {
    layout() {
      this.$store.commit("layout");
    },
  },
  computed: {
    user() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style scoped>
.head {
  display: flex;
  align-items: center;
  height: 140px;
  background-color: #3296fa;
}
.head .img {
  width: 80px;
  height: 80px;
  margin-left: 20px;
  margin-right: 10px;
}
.right-sizi h4 {
  color: #fff;
  font-size: 18px;
}
.right-sizi span {
  color: #3296fa;
  font-size: 14px;
  background-color: #fff;
  padding: 4px;
}
.van-col {
  height: 90px;
  display: flex;
  /* // 设置一上一下排列 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.van-col span {
  font-size: 14px;
}
</style>